<template>
    <u-navbar
        title="发布活动"
        autoBack
        placeholder
        height="44px"
    >
    </u-navbar>
    <view class="app-container" style="padding-bottom: 200rpx;">
        <view class="align-center mb26">
            <i class="iconfont icon-fabuhuodong"></i>
            <text class="font30 ml8">请选择活动类型</text>
        </view>
        <view class="align-center mb36" style="gap: 26rpx;">
            <view v-for="item in 3" :key="5" :class="['tips', state.current === item ? 'tips-active' : '']" @click="changeTips(item)">体育器材</view>
        </view>
        <u-form 
            labelWidth="450rpx" 
            :labelStyle="{ 'font-weight': '800', 'font-size': '30rpx', color: '#000' }"
        >
            <u-form-item label="主题" borderBottom>
                <u-input placeholder="不超过100字" border="none"></u-input>
            </u-form-item>
            <u-form-item label="地址" borderBottom>
                <u-input placeholder="请输入地址" border="none" suffixIcon="map-fill" suffixIconStyle="color: #966BFF"></u-input>
            </u-form-item>
            <u-form-item label="开始时间" borderBottom @click="showDatetime">
                <u-input placeholder="请选择开始时间" border="none" disabled></u-input>
                <template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
            </u-form-item>
            <u-form-item label="结束时间" borderBottom @click="showDatetime">
                <u-input placeholder="请选择结束时间" border="none" disabled></u-input>
                <template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
            </u-form-item>
            <u-form-item label="联系方式" borderBottom>
                <u-input placeholder="请输入手机号码" border="none"></u-input>
            </u-form-item>
            <u-form-item label="价格" borderBottom>
                <u-number-box></u-number-box>
            </u-form-item>
            <view class="form-item">
                <u-form-item label="闲置介绍" labelWidth="200rpx" >
                    <u-textarea placeholder="请输入内1容" border="none"></u-textarea>
                </u-form-item>
            </view>
            <view class="font26 grey mb26">图片/视频上传</view>
            <u-upload name="1" multiple :maxCount="10"></u-upload>
            <view class="font24 grey mt26">*请按<text class="purple">社区规范</text>合理发布，如有违规会被删除，严重乃至封号</view>
        </u-form>
    </view>
    <view class="footer">
        <view class="btn">发布</view>
    </view>
    <u-datetime-picker 
        :show="state.showDate" 
        mode="datetime"
        closeOnClickOverlay
        @close="cloeseDatetime"
        @cancel="cloeseDatetime"
    ></u-datetime-picker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const state = ref({
    current: 0,
    showDate: false
})

const changeTips = (val:number) => {
    state.value.current = val;
}

const showDatetime = () => {
    state.value.showDate = true;
}

const cloeseDatetime = () => {
    state.value.showDate = false;
}
</script>

<style lang="scss" scoped>
    .form-item {
        ::v-deep {
            .u-form-item__body {
                flex-direction: column !important;
            }

            .u-textarea {
                padding: 9px 0;
            }
        }
    }
    .tips {
        padding: 10rpx 26rpx;
        background: #F8F8FA;
        border-radius: 28rpx;
        font-size: 26rpx;
        color: #B1B1B1;
    }

    .tips-active {
        background: #966BFF;
        color: #FFFFFF;
    }
    .footer {
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36rpx 26rpx 70rpx 71rpx;
        background: #fff;
        box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(196, 196, 196, 0.16);
        border-radius: 30rpx 30rpx 0 0;

        .btn {
            width: 450rpx;
            height: 80rpx;
            background: #966BFF;
            border-radius: 46rpx;
            text-align: center;
            line-height: 80rpx;
            font-size: 30rpx;
            font-weight: 800;
            color: #fff;

            &:active {
                opacity: .7;
            }
        }
    }
</style>